<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed【计算属性】,watch【监听】</title>
    <script src="js/data.js"></script>

</head>
<body>
<div id="div1">
    <input type="number" v-model="num1">/<input type="number" v-model="num2">=<span>{{sum |setFloat(3)}}</span>
    <p>
        <time>{{date |formatDate}}</time>
    </p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#div1',
        data: {
            num1: 0,
            num2: 0,
            date: new Date()
        },
        computed: {
            sum() {
                return (parseInt(this.num1) / parseInt(this.num2))
            }
        }, watch: {
            // num1() {
            //     this.sum = parseInt(this.num1)+parseInt(this.num2)
            // }, num2() {
            //     this.sum = parseInt(this.num1)+parseInt(this.num2)
            // }
        }, filters: {
            formatDate(val) {
                const d = new Date(val);
                const year = d.getFullYear();
                const month = d.getMonth() + 1;
                const date = d.getDate();
                return `${year}年${month}月${date}日`
            },
            setFloat(val, n) {
                return val.toFixed(n)
            }
        }
    })
</script>
</body>
</html>